<template>
  <div class="page_content daraBoardStreetAnalysis_content">
    <!-- <div class="header_title p-10 flex flex-ac">
      <div class="icon">
        <img :src="iconPng" class="img" />
      </div>
      <div class="title ml-10">混投率统计</div>
    </div> -->
    <div class="header_box p-10 bold flex flex-ac flex-jsb">
      <div class="title">混投率统计</div>
    </div>
    <div class="main_box  ">
      <div ref="mainEchart" class="main_echart"></div>
    </div>
    <div class="footer_txt flex flex-ac flex-jc " >
      <div class="left flex-1 flex flex-ac flex-jc ">50次未处理</div>
      <div class="right flex-1 flex flex-ac flex-jc ">50次已处理</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
  ref,
  computed,
  watch,
  onMounted,
  onBeforeUnmount,
  reactive,
  shallowRef,
  onUnmounted,
} from "vue";
// import { useStore } from "vuex";
import * as echarts from "echarts";

// const store = useStore();
const iconPng = new URL("@/assets/img/index/pf.png", import.meta.url).href;
const props: any = defineProps({});
const mainEchart = ref<any>(null);
const myChart = shallowRef();
onMounted(() => {
  myChart.value = echarts.init(mainEchart.value);
  chartInit();
  window.addEventListener("resize", handleResize);
});

onBeforeUnmount(() => { });
onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
});
const chartInit = () => {
  let color = ["#FF8700", "#ffc300", "#00e473", "#009DFF"];
  // 绘制图表
  myChart.value.setOption({
    tooltip: {
      trigger: "item",
      showContent: false,
    },
    // legend: {
    //   top: "5%",
    //   left: "center",
    // },
    title: {
      text: "15%",
      left: "center",
      top: "center",
      textStyle: {
        fontSize: 34,
        color: "#ff6200",
      },
    },
    color: ["rgba(239, 239, 239)"],
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["60%", "86%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        itemStyle: {
          borderRadius: 4,
          borderColor: "#fff",
          borderWidth: 0,
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          {
            value: 1048,
            name: "Search Engine",
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#e44d44" },
                  { offset: 1, color: "#e44d44" },
                ]),
              },
            },
          },
          { value: 735, name: "Direct" },
        ],
      },
    ],
  });
};
const handleResize = () => {
  if (myChart.value) {
    // 调用Echarts实例的resize方法，重新绘制图表
    myChart.value.resize();
  }
};
</script>

<style lang="scss" scoped>
.daraBoardStreetAnalysis_content {
  height: 320px;

  .header_title {
    height: 40px;
    background: linear-gradient(to right, rgb(216, 242, 252), #ffffff);

    .icon {
      width: 26px;
      height: 26px;

      .img {
        width: 100%;
        height: 100%;
      }
    }

    .title {
      font-size: 16px;
      font-weight: 550;
      color: #333333;
    }
  }

  .main_box {
    margin: 10px 10px 0;
    .main_echart {
      width: 100%;
      height: calc(320px - 35px - 20px - 24px);
    }
  }

  .footer_txt {
    height: 24px;
    font-size: 12px;
    margin: 0 20px;
    border-radius: 4px;
    overflow: hidden;
    .left{
      height: 100%;
      background: #e44d44;
      color: #ffffff;
    }
    .right{
      height: 100%;
      background: #e4e3e3;
    }
  }
}
</style>